<template>
    <view style="height: 100%">
        <view class="pr">
            <view class="addr-box bgcf df ac sb pd015" @tap="onAddress">
                <view class="f1 df ac">
                    <image class="img22 mr12" src="https://wx.xtwaixie.com/img/dz.png" />
                    <p class="f1 f18 c28 f600" v-if="!address_info.username">添加收货地址</p>
                    <view v-else>
                        <P class="df f16 c28 f600">
                            <span class="mr12">{{ address_info.username }}</span>
                            <span>{{ address_info.mobile }}</span>
                        </P>
                        <p class="ovh f13 c6b db w255 mt3">
                            {{ address_info.province + address_info.city + address_info.area + address_info.address }}
                        </p>
                    </view>
                </view>
                <image class="img14" src="https://wx.xtwaixie.com/img/more1.png" />
            </view>
            <image class="dz-bg" src="https://wx.xtwaixie.com/img/dz-bg.png" />
        </view>

        <!-- 商品信息 -->
        <view class="bgcf mt10 br12 pd15">
            <p class="f16 c28 f600 db">商品信息</p>
            <block v-for="(item, index) in info.goodsList" :key="index">
                <view class="df pd150 bbf1">
                    <image class="img72 br8"  referrerPolicy='no-referrer' :src="item.thumb" />
                    <view class="f1 ml15">
                        <p class="f14 c28 ovh db f500 w224">{{ item.title }}</p>
                        <p class="f12 c9d db mt5">{{ item.sku_title }}</p>
                        <view class="df ac sb mt12">
                            <p class="f12 c28 f500">¥{{ item.price }}</p>
                            <p class="f12 c9d">×{{ item.number }}</p>
                        </view>
                    </view>
                </view>
            </block>

            <view class="df ac sb mt15">
                <P class="f12 c6b">商品总价</P>
                <P class="f12 c6b">（未含税）¥{{ info.price }}</P>
            </view>
            <view class="df ac sb mt12">
                <P class="f12 c6b">运费</P>
                <P class="f12 c6b">¥{{ info.express_fee }}</P>
            </view>
            <view class="df ac sb mt12">
                <P class="f12 c28 f600">商品总价</P>
                <P class="f14 f500 cff8">（含税）¥{{ info.totalPrice }}</P>
            </view>
        </view>

        <view class="pd15 bgcf br12 df ac mt10">
            <image class="img18 mr12" src="https://wx.xtwaixie.com/img/wx.png" />
            <p class="f14 c28">微信支付</p>
        </view>

        <view class="pob pd715 btf1">
            <view class="df ac sb">
                <p class="f16 cff8 f600">合计：¥{{ info.needPayPrice }}</p>
                <view class="buy-but ml8 bgc10" @tap="onBuy">提交订单</view>
            </view>
        </view>
    </view>
</template>

<script>
const http = require('../../utils/http');

// pages/order/suerOrder.js
export default {
    data() {
        return {
            color_id: '',
            size_id: '',
            number: '',
            goods_id: '',
            lock: false,

            address_info: {
                username: '',
                mobile: '',
                province: '',
                city: '',
                area: '',
                address: ''
            },

            info: {
                goodsList: [],
                price: '',
                express_fee: '',
                totalPrice: '',
                needPayPrice: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            goods_id: options.id,
            number: options.number,
            size_id: options.size_id,
            color_id: options.color_id
        });
        this.onSuerInfo();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.setData({
            address_info: uni.getStorageSync('address_info') || this.address_info
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 确认订单详情
        onSuerInfo() {
            let data = {
                color_id: this.color_id || '',
                size_id: this.size_id || '',
                number: this.number || '',
                goods_id: this.goods_id || ''
            };
            http.request('order/confirmOrderPage', data)
                .then((res) => {
                    this.setData({
                        info: res.data,
                        address_info: res.data.address_info
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        // 确认支付
        onSuer(info, id) {
            // 小程序支付
            uni.requestPayment({
                timeStamp: info.timeStamp,
                nonceStr: info.nonceStr,
                package: info.package,
                signType: info.signType,
                paySign: info.sign,
                success: (res) => {
                    uni.reLaunch({
                        url: '/pages/order/orderSuccess'
                    });
                    this.setData({
                        lock: false
                    });
                },
                fail: (res) => {
                    console.log(res);
                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    });
                    this.setData({
                        lock: false
                    });
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/myOrder/orderDetail?id=' + id + '&type=2'
                        });
                    }, 1000);
                }
            });
        },

        onAddress() {
            uni.navigateTo({
                url: '/pages/address/addressList'
            });
        },

        onBuy() {
            let data = {
                color_id: this.color_id || '',
                size_id: this.size_id || '',
                number: this.number || '',
                goods_id: this.goods_id || '',
                address_id: this.address_info.id || ''
            };
            if(this.info.needPayPrice * 100 < 5000 * 100){
                uni.showToast({
                    title: '购物需要满5000元才可下单',
                    icon: 'none'
                });
                return
            }
            if (this.lock) {
                return false;
            }
            this.setData({
                lock: true
            });
            http.request('order/orderadd', data)
                .then((res) => {
                    let order_id = res.data.order_id;
                    let info = res.data.wechatPay;
                    this.onSuer(info, order_id);
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                        duration: 2000
                    });
                });
        }
    }
};
</script>
<style>
@import './suerOrder.css';
</style>
